<template>
	<view class="filter-page">
		<view :style="{height:$store.state.StatusBar.statusBar + 'px'}">
		</view>
		<!-- <view class="page"></view> -->
		<view class="flex_r fj_b z_index2 top">
			<!-- <view class="text_34 nav-item-title c-primary" style="position:absolute; left:10rpx;margin-top:28rpx; font-size:28rpx;" @click="goPosition">
				<image src="./img/adress_icon.png" style="width:30rpx; height:30rpx;" mode="aspectFill"></image>
				{{address}}
			</view> -->
			<view class="flex_r fa_c nav">
				<view class="flex_c_c nav-item" v-for="(item,index) in tabList" :key="index"
					@click="switchTabbarPage(index)">
					<view class="text_34 nav-item-title c-primary">
						{{item.title}}
					</view>
					<view class="nav-itemimg" :class="{nav_itemimg:currentIndex !== index}">
						<view class="active-line"></view>
						<!-- <image class="img" src="./img/ic_radio_select.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		</view>
		<scroll-view :style="{height:scrollHeight+'px'}" style="background: transparent;"
			refresher-background="rgba(153, 153, 153, 0)" scroll-y refresher-enabled
			:refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh" @scrolltolower="getList">
			<view class="flex flex-between flex-wrap px-24">
				<swiper v-if="currentIndex == 2" class="swiper" :vertical="true">
					<swiper-item v-if="currentIndex == 2" v-for="(item,index) in userList">
						<view class="item2">
							<view style="height:78vh; width: 710rpx; position:relative;">
								<image @click="goUser(item)" :src="item.usericon" mode="aspectFill"
									style="width: 100%; height:100%;" class="radius-12">
								</image>
								<view style="position:absolute; right:20rpx; transform: translateY(-200rpx);">
									<image @click="goMsg(item)" src="./img/block_chat_icon.png" mode="aspectFill"
										style="width: 80rpx; height:80rpx; ">
										<view style="color:#fff">打招呼</view>
								</view>
								<view style="position:absolute;left: 40rpx; bottom:80rpx;" class="c-fff f-28">
									<view class="py-24 px-12 c-fff">
										<view class="c-fff">
											<text>{{item.usernick}}</text>
											<image src="./img/ic_hot_flag.png" mode="aspectFill"
												style="width: 60rpx; height:30rpx; margin-left:10rpx; transform: translateY(8rpx);">
										</view>
										<view class="c-fff">
											<text>{{item.age}}岁</text>
											<text class="mx-4" v-if="item.address">|</text>
											<text>{{item.address}}</text>
											<text class="mx-4" v-if="item.shengao">|</text>
											<text>{{item.shengao}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view v-if="currentIndex == 1 || currentIndex == 3" v-for="(item,index) in userList">
					<view
						style="height:240rpx; width: 700rpx; background-color: rgba(246, 246, 246, 0.1); border-radius: 10rpx; margin: 10rpx;box-sizing: border-box; "
						:class="isVip?'': 'blur-view'" class="" @click="goUser(item)">
						<image :src="item.usericon" mode="aspectFill" style="width: 164rpx; height:200rpx; float:left;"
							class="radius-12">
						</image>
						<view style="width:100vw; padding-left:200rpx;" class="c-fff f-28">
							<view class="py-24 px-12 c-fff">
								<view class="c-fff">
									<text>{{item.usernick}}</text>
									<image v-if="item.usersex == 1" src="./img/sex_male.png" mode="aspectFill"
										style="width: 30rpx; height:30rpx; margin-left:10rpx; margin-top:5rpx;">
										<image v-else src="./img/sex_fmale.png" mode="aspectFill"
											style="width: 30rpx; height:30rpx; margin-left:10rpx; margin-top:5rpx;">
											<text style="margin-left:10rpx;">{{item.age}}岁</text>
											<image @click="goMsg(item)" src="./img/home_hot_zh.png" mode="aspectFill"
												style="width: 120rpx; height:50rpx; position:absolute; right:20rpx;">
								</view>
								<view>
									<image src="./img/n_zhenren_n.png" mode="aspectFill"
										style="width: 80rpx; height:40rpx; ">
										<image src="./img/home_wechat.png" mode="aspectFill"
											style="width: 80rpx; height:40rpx; margin-left:10rpx;">
								</view>
								<view>
									<image v-for="(data, index) in getbanner(item)" :src="data" mode="aspectFill"
										style="width: 100rpx; height:100rpx; float:left; margin-left:10rpx;" @click.stop="onPreviewImage(item, index)"
										class="radius-12"> </image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="currentIndex == 0" class="z_index2 mb-18" v-for="(item,index) in userList">
					<view class="relative radius-8" @click="goUser(item)">
						<image :src="item.usericon" mode="aspectFill" style="width: 344rpx;400rpx" class="radius-12">
						</image>
						<view style="position: absolute; top: 0;left: 0;right: 0; bottom: 0;" class="c-fff f-28">
							<view class="online">
								<view class="type1" v-if="item.online>4">
									<view class="dot"></view>
									<view style="color: #fff;">{{item.online}}分前在线</view>
								</view>
								<view class="type2" v-else>
									<view class="dot"></view>
									<view style="color: #fff;">在线</view>
								</view>
							</view>
							<view style="position: absolute;bottom: 20rpx; left: 10rpx; right: 10rpx; width:95%; ">
								<view class="c-fff">{{item.usernick}}</view>
								<view class="c-fff distance-ivew">
									<view class="left">
										<text>{{item.age}}岁</text>
										<text class="mx-4" v-if="item.address">|</text>
										<text>{{item.address}}</text>
										<text class="mx-4" v-if="item.shengao">|</text>
										<text>{{item.shengao}}</text>
									</view>
								</view>
								<view class="c-fff distance-ivew">
									<view class="left">
										<image
											src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/home_wechat.png">
										</image>
										<text>{{replaceStar(item.weChatNum)}}</text>
									</view>
									<view class="distance">
										<image
											src="https://zhiyuapp.oss-cn-fuzhou.aliyuncs.com/uniapp_android/image/lalaq/ic_location_blue.png">
										</image>
										<text>{{item.distance}}km</text>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

		</scroll-view>

		<uni-popup ref="pay" type="bottom" :mask-click="false">
			<m-pay :money="pay.price" :projectId="pay.id" :type="3"></m-pay>
		</uni-popup>

		<uni-popup ref="vip" type="bottom" :mask-click="false">
			<view class="popup-vip">
				<image class="avatar" :src="vipPic"></image>
				<view class="title">解锁聊天</view>
				<view class="btn" @click="toVip">开通会员获得特权</view>
			</view>
		</uni-popup>
	</view>


</template>
<script>
	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif
	export default {
		computed: {
			scrollHeight() {
				const tophight = uni.upx2px(100)
				return this.$store.state.StatusBar.screenHeight - this.$store.state.StatusBar.statusBar - tophight - 50
			},
		},
		data() {
			return {
				pay: {
					price: '28.00'
				},
				address: "未知",
				video: {
					innerAudioContext: {},
					status: false,
					userid: 0
				},
				pageno: 1,
				refresherTriggered: true,
				type: 0,
				tabList: [{
						title: '同城'
					},
					{
						title: '世界'
					},
					{
						title: '新人'
					}
				],
				userList: [],
				userList2: [],
				currentIndex: 0,
				longitude: 0,
				latitude: 0,
				user: {},
				isVip: true,
				vipPic: ''
			}
		},
		onHide() {
			this.video.innerAudioContext.destroy();
		},
		onLoad(option) {
			this.requestCity()
		},
		onShow() {
			this.isPay();
			this.getInfo();
			this.requestUser();
			console.log("home-onShow", getApp().globalData.openTicket)
			if(getApp().globalData.openTicket){
				setTimeout(()=>{
					getApp().globalData.openTicket = false
					uni.hideTabBar()
					this.$refs.pay.open();
				}, 1000)
			}
		},
		methods: {
			getInfo() {
				setTimeout(() => {
					this.open()
				}, 500)
				this.video.innerAudioContext = uni.createInnerAudioContext();
				this.video.innerAudioContext.onPlay(() => {
					this.video.status = true;
					console.log('开始播放');
				});
				this.video.innerAudioContext.onError((res) => {
					uni.showToast({
						title: "播放失败",
						icon: "none"
					})
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				this.video.innerAudioContext.onEnded((res) => {
					this.video.userid = 0;
					this.video.status = false;
					console.log('播放结束');
				});
				//定位
				// this.getLocation();

				if (this.userList.length > 0) {
					return;
				}
				this.pageno = 1;
				this.userList = [];
				this.getList();
			},
			async isPay() {
				let vipManage = uni.getStorageSync('vipManage');
				console.log("home-vipManage: " + JSON.stringify(vipManage));
				if (1 == vipManage || 2 == vipManage) {
					let res = await this.$c.post("/app/tickUserInfo/info");
					console.log("门票：" + JSON.stringify(res));
					if (res.code == 0) {
						if (res.data.windowTicket == 2) {
							this.pay.price = uni.getStorageSync("ticketPrice");
							console.log("price: " + JSON.stringify(this.pay.price));
							if(1 == vipManage){
								uni.hideTabBar()
								this.$refs.pay.open("bottom");
							}else{
								console.log("openTicket: " + JSON.stringify(getApp().globalData.openTicket));
								if(getApp().globalData.openTicket){
									setTimeout(()=>{
										uni.hideTabBar()
										this.$refs.pay.open();
									}, 1000)
								}else{
									if(uni.getStorageSync("ticketOver"+uni.getStorageSync('userId'))){
										console.log('门票3分钟已体验');
										uni.hideTabBar()
										this.$refs.pay.open("bottom");
									}else{
										getApp().toTicket();
									}
								}
							}
						} else {
							getApp().globalData.openTicket = false
							uni.showTabBar();
							this.$refs.pay.close();
						}
					}
				}
			},
			onAudio(item) {
				if (this.video.userid != 0 && this.video.status != false && this.video.userid == item.userid) {
					if (this.video.status) {
						//暂停
						this.video.innerAudioContext.stop();
						this.video.status = false;
					} else {
						//播放
						this.video.innerAudioContext.play();
						this.video.status = true;
					}
				} else {
					this.video.userid = item.userid
					this.video.innerAudioContext.src = item.voiceSignature;
					this.video.innerAudioContext.autoplay = true;
				}

			},
			goUser(item) {
				if (this.currentIndex == 1 && !this.isVip && this.$constant.vipType) {
					this.vipPic = item.usericon;
					this.$refs.vip.open()
					return
				}
				uni.navigateTo({
					url: `/pages/m-pages/m-user-info/index?userid=` + item.userid
				})
			},
			goSearch() {
				uni.navigateTo({
					url: `/im/conversation/create-conversation/create`
				})
			},
			goMsg(item) {
				uni.navigateTo({
					url: `/im/chat/chat?userid=` + item.userid + `&conversationID=C2C` + item.texcode,
				});
			},
			refresherrefresh() {
				this.pageno = 1;
				this.userList = [];
				this.getList()
				this.refresherTriggered = true
			},
			async getList() {
				let url = "";
				url = '/appfujinren/recommentList?pageno=' + this.pageno + '&gender=1&type=' + (this.currentIndex + 1);
				let res = await this.$c.post(url)
				if (res.code != 0) {
					uni.navigateTo({
						url: '/im/login/login'
					});
				} else {
					let list = res.data
					if (this.currentIndex == 0) {
						let userDistanceList = uni.getStorageSync('userDistance');
						if (!userDistanceList) {
							userDistanceList = [];
						}
						list.forEach(item => {
							let flag = true;
							if (!this.hasCacheDistance(userDistanceList, item)) {
								item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
								item.online = Math.floor(Math.random() * 30) + 1;
								let data = {
									userId: item.userid,
									distance: item.distance,
									nick: item.usernick,
									online: item.online,
									time: new Date().getTime()
								}
								userDistanceList.push(data);
							}
						});
						uni.setStorageSync('userDistance', userDistanceList);
					}

					this.userList = this.userList.concat(list)
				}
				this.pageno++;
				this.refresherTriggered = false
			},
			hasCacheDistance(userDistanceList, item) {
				let flag = false
				userDistanceList.forEach(data => {
					if (item.userid == data.userId) {
						item.distance = data.distance;
						item.online = data.online;
						let now = new Date().getTime();
						let old = data.time;
						if ((now - old) > 1000 * 60 * 20) {
							item.distance = (Math.random() * (20 - 0.2) + 0.2).toFixed(1);
							item.online = Math.floor(Math.random() * 30) + 1;
							data.time = now;
							data.distance = item.distance;
							data.online = item.online;
						}
						flag = true;
					}
				});
				return flag;
			},

			goPosition() {
				uni.navigateTo({
					url: "/pages/m-pages/m-position/m-position"
				})
			},
			async open() {
				// let value = uni.getStorageSync('home_open');
				// if ((new Date).getDate() == value) {
				// 	return;
				// }
				// let res = await this.$c.post('/app/user/getRandomUserList')
				// if (res.code == 0) {
				// 	this.userList2 = res.data
				// 	uni.setStorage({
				// 		key: 'home_open',
				// 		data: (new Date).getDate(),
				// 	});
				// 	// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				// 	this.$refs.popup.open()
				// 	console.log(this.userList2)
				// }
			},
			close() {
				this.$refs.popup.close()
			},
			changeType() {
				this.type = !this.type
				this.switchTabbarPage(2)
			},
			switchTabbarPage(index) {
				this.currentIndex = index
				this.pageno = 1;
				this.userList = [];
				this.getList()
			},
			// async getLocation() {
			// 	// #ifdef APP-PLUS
			//     let status = await this.checkPermission();
			// 	console.log("定位状态："+status);
			//     if (status !== 1) {
			//         return;
			//     }
			// 	// #endif
			//     this.doGetLocation();
			// },
			doGetLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log('当前位置的城市：' + res.address.city);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.address = res.address.city;
						this.longitude = res.longitude
						this.latitude = res.latitude
					},
					fail: (err) => {
						console.log('定位失败：' + err.errMsg);
					}
				})
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') :
					await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');

				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						content: "需要定位权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			getbanner(user) {
				let banners = [];
				if (user.xingxiangList && user.xingxiangList.length > 0) {
					banners = user.xingxiangList
				} else {
					banners.push(user.usericon);
				}
				return banners;
			},
			onPreviewImage(user, index) {
				uni.previewImage({
					urls: this.getbanner(user),
					current: index,
					fail: (error) => {
						console.log("error: " + JSON.stringify(error));
					}
				})
			},
			async requestUser() {
				let res = await this.$c.post('/app/usermessage/getMessage');
				if (0 == res.code) {
					this.user = res.data;
					if (1 != res.data.vipMap.isVip) {
						if (this.$constant.vipType) {
							// this.isVip = false
						}
					}
				}
			},
			toVip() {
				uni.navigateTo({
					url: '/pages/m-pages/m-vip/index'
				})
			},
			replaceStar(str) {
				if (str) {
					var len = str.length;
					if (len <= 4) {
						return "******";
					} else {
						var regex = /^(.{0,2}).*?(.{2})$/; // 匹配字符串的前两位和最后2位
						return str.replace(regex, "$1*****$2")
					}
				} else {
					return "******";
				}
			},
			async requestCity() {
				let res = await this.$c.post('/api/ipGetAddress/getAddress');
				if (res.code == 0) {
					// console.log("res: " + JSON.stringify(res));
					const result = res.data.data.result;
					let city = res.data.data.result.city;
					this.requestUpdateCity(result.lng, result.lat, result.city);
				}
			},
			async requestUpdateCity(lng, lat, city) {
				let params = {
					lon: lng,
					lat: lat,
					shi: city,
					address: city,
					// addressdetail: address
				}
				let res = await this.$c.post('/app/user/updateWeiZhi', params);
				if (res.code == 0) {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.online {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		top: 20rpx;
		right: 10rpx;
		font-size: 20rpx;
		
		.type1{
			display: flex;
			flex-direction: row;
			align-items: center;
			.dot {
				width: 18rpx;
				height: 18rpx;
				background-color: limegreen;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
		.type2{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 8rpx 10rpx;
			background-color: limegreen;
			border-radius: 100rpx;
			.dot {
				width: 18rpx;
				height: 18rpx;
				background-color: white;
				border-radius: 50%;
				margin-right: 5rpx;
			}
		}
	}

	.distance-ivew {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: center;

		.left {
			flex: 1;
			display: flex;
			flex-direction: row;
			font-size: 24rpx;
			color: #fff;

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}

		.distance {
			display: flex;
			flex-direction: row;
			font-size: 20rpx;
			color: #fff;
			align-items: center;

			image {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}

	.content {
		width: 100vw;
		height: 100vh;
	}

	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.custom-page {
		width: 100%;
		height: 0;
		/* border: 1px solid red; */
		// background-color: #999;
	}

	.custom-page-title {
		box-sizing: border-box;
		position: absolute;
		padding: 0 20rpx;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 100rpx;
		background-color: #e3ecfb;
	}

	.popup {
		width: 620rpx;
		height: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 0rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0.8);
		// background-color: #fff;
		// background-image: linear-gradient(to top, #e0dbff, #fff);

		.popup-title {
			width: 100%;
			position: relative;
			color: $uni-color-primary;
			text-align: center;
			height: 60rpx;

			.popup-title-img {
				position: absolute;
				z-index: 2;
				right: 30rpx;
				top: -10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.popup-content {
			width: 100%;
			margin-top: 10rpx;

			.page-current {
				height: 0;
				width: 100%;

				.list {
					box-sizing: border-box;
					padding: 0 10rpx;
					width: 100%;
					height: 100%;
					flex-wrap: wrap;

					.item {
						position: relative;
						width: calc(33.33% - 6rpx);
						height: 46%;

						.selected {
							position: absolute;
							top: 4rpx;
							right: 4rpx;
							width: 44rpx;
							height: 44rpx;
							z-index: 9;
						}

						.item-img {
							width: 100%;
							height: 220rpx;
							border-radius: 20rpx;
							overflow: hidden;

							// background-color: #999;
							image {
								width: 220rpx;
								height: 220rpx;
							}
						}

					}

				}

			}
		}

		.popup-button {
			width: 450rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
		}
	}


	.top {
		width: calc(100% - 60rpx);
		height: 100rpx;
		margin: 0 auto;

		.nav {
			width: 400rpx;
			height: 90rpx;
			margin-top: 10rpx;
			margin-left: 120rpx;

			.nav-item {
				width: 130rpx;
				height: 100%;

				.nav-item-title {
					height: 50rpx;
				}

				.nav-itemimg {
					position: relative;
					top: -10rpx;
					width: 50rpx;
					height: 30rpx;
					transition: all .3s;
					opacity: 1;
				}

				.active-line {
					width: 100%;
					height: 6rpx;
					border-radius: 12rpx;
					background: #FDB175;
					margin-top: 12rpx;
				}

				.nav_itemimg {
					opacity: 0;
					transition: all .3s;
				}
			}
		}

		.top-button {
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 32rpx;
			color: #f82f6b;
			border: 1px solid #f82f6b;
		}

		.nav-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
	}

	.item1 {
		width: calc(100vw-40rpx);
		padding: 20rpx;
		background-color: #363636;
		transform: translateX(-20rpx);
	}

	.row {
		.item {
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			width: 100%;

			.item-img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				background-color: #999;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.item-r {
				.item-name {
					.item-name-label {
						width: 100rpx;
						height: 40rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
					}
				}

				.infor {
					width: 100%;
					height: 50rpx;

					.infor-str {
						width: 1px;
						height: 30rpx;
						margin: 0 10rpx;
						background-color: #999;
					}
				}

				.voice {
					box-sizing: border-box;
					padding: 0 8rpx 0 0;
					width: 250rpx;
					height: 50rpx;
					border-radius: 25rpx;
					background-color: #ff0f6f;

					.voice-icon {
						width: 50rpx;
						height: 50rpx;
						overflow: hidden;
						border-radius: 50%;
					}

					.voice-img {
						height: 100%;
						margin: 0 10rpx;
					}

					.voice-value {
						box-sizing: border-box;
					}
				}



				.item-r-icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					background-color: #fff;
				}

			}
		}
	}

	.blur-view {
		filter: blur(5px);
	}

	.popup-vip {
		width: 100wh;
		height: 500rpx;
		background-color: #282828;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			margin-top: 50rpx;
		}

		.title {
			margin-top: 50rpx;
			font-size: 36rpx;
			color: #f6f6f6;
		}

		.btn {
			margin-top: 50rpx;
			font-size: 36rpx;
			color: #f6f6f6;
			background-color: #eaa268;
			border-radius: 50rpx;
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			text-align: center;
		}
	}
</style>